<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/ssmzy05/static/js/vue.js"></script>
    <script src="/ssmzy05/static/js/jquery-3.3.1.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{
            padding: 0;
            background-color: #cbced5;
        }
        .el-input{
            width: 250px;
        }
        #login{
            width: 350px;
            margin-top: 130px;
            margin-left: 715px;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: white;
            border-radius: 10px;
        }
        p{
            padding-top: 10px;
        }
        .el-button{
            width: 250px;
        }

    </style>
</head>
<body>
    <div id="app">
        <div id="login">
            <h2>用户登录</h2>
            <p>
                <el-input v-model="username" placeholder="请输入账号"></el-input>
            </p>
            <p>
                <el-input type="password" v-model="pwd" placeholder="请输入密码"></el-input>
            </p>
            <p>
                <el-button type="primary" :loading="loading" @click="login">{{loginBtn}}</el-button>
            </p>
            <p>
                <el-button @click="clearInput">重置</el-button>
            </p>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            username: "",
            pwd: "",
            loginBtn: "登录",
            loading: false
        },methods: {
            clearInput(){
                this.username = '';
                this.pwd = '';
            },
            login(){
                let vue = this;
                $.ajax({
                    url:'http://localhost:8080/ssmzy05/consumer/queryConsumerBy',
                    type:'post',
                    async:true,
                    data:{
                        username:vue.username,
                        pwd:vue.pwd
                    },
                    dataType:'json',
                    beforeSend:function (be) {
                        console.log("正在请求");
                        vue.loading = true;
                        vue.loginBtn = "登录中";
                    },
                    success:function (data){
                        console.log(data)
                        if (data.message == "ok"){
                                vue.loginBtn = "登录";
                                vue.loading = false;
                                vue.$message({
                                    type: "success",
                                    message: "登录成功"
                                });
                            sessionStorage.setItem("username",vue.username)
                            location.href = "static/html/index.html";
                        }else {
                            vue.loginBtn = "重新登录";
                            vue.loading = false;
                            vue.$message({
                                type: "error",
                                message: "登录失败"
                            });
                        }
                    },error:function (error) {
                        console.log(error);
                    }
                })
            }
        }
    })
</script>
</html>